<template>
	<mu-paper class="container-wrap">
		<mu-paper class="list-header" :z-depth="1">
			<mu-list class="badge-list-wrap">
				<mu-list-item>
					<mu-list-item-action>
						<mu-icon left value="dashboard"></mu-icon>
					</mu-list-item-action>
					<mu-list-item-title>
						案件号：92500032008333786092
					</mu-list-item-title>
					<mu-button small color="secondary" @click="openImgs()">
						定损图片
					</mu-button>
				</mu-list-item>
			</mu-list>
		</mu-paper>
		<mu-container ref="container" class="list-content" style="z-index: 99;">
			<mu-list>
				<template v-for="i in num">
					<mu-list-item :ripple="true" @click="openDetail()" button>
						<mu-paper>
							<mu-button small flat :disabled="true">
								<mu-icon left value="apps"></mu-icon>
								配件：行李箱盖
							</mu-button>
							<div class="tb_line"></div>
						</mu-paper>
						<mu-list-item-action>
							<img src="../../assets/img/1.jpg">
						</mu-list-item-action>
						<mu-list-item-content>
							<mu-list-item-sub-title>
								<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车</span>
							</mu-list-item-sub-title>
							<mu-list-item-sub-title>
								<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">高配：&nbsp;&nbsp;否</span>
							</mu-list-item-sub-title>
						</mu-list-item-content>
					</mu-list-item>
				</template>
			</mu-list>
		</mu-container>
	</mu-paper>

</template>

<script>
	import Vue from "vue";
	import '../../utils/common';
	import { immersed } from "@/utils/immersed.js";
	import { openWebviewFast } from "@/utils/webview";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);

	export default {
		data() {
			return {
				num: 3
			}
		},
		methods: {
			openImgs() {
				openWebviewFast(
					 "./index.imgs.html",
					"index.imgs",
					"定损图片"
				);
			},
			openDetail() {
				openWebviewFast(
					 "./index.detail.html",
					"index.detail",
					"待回收"
				);
			}
		}
	};
</script>

<style lang="less">
	.container-wrap {
		width: 100%;
		max-width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F1F1F1;
		.list-header {
			width: 100%;
			margin: 0 auto;
			z-index: 100;
			position: relative;
			border-radius: 0;
			padding: 0;
			.mu-list {
				padding: 0;
				.mu-item {
					padding: 0 0 0 5px;
					.mu-item-title {
						font-size: 14px;
						font-weight: bold;
					}
					.mu-icon {
						margin-top: -1px;
						font-size: 16px;
					}
					.mu-button {
						position: absolute;
						right: 5px;
						top: 10px;
					}
				}
			}
			.mu-item-action {
				min-width: auto;
			}
		}
	}
	
	.list-content {
		flex: 1;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		.mu-item {
			height: 180px;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 0 5px;
			padding-top: 40px;
			.mu-paper {
				position: absolute;
				left: 0;
				top: 0px;
				font-weight: bold;
				background-color: rgba(0, 0, 0, 0);
				width: 100%;
				text-indent: 2px;
				.mu-flat-button.mu-button-small {
					color: #333;
					font-size: 14px;
					height: 28px;
					margin: 8px 0 4px;
					.mu-icon-left {
						margin-top: -2px;
					}
				}
				.tb_line {
					border: none;
					border-bottom: 1px solid #e1e3e5;
					height: 1px;
					transform: scaleY(0.5);
					transform-origin: 0 0;
					-webkit-transform: scaleY(0.5);
					-webkit-transform-origin: 0 0;
				}
			}
			.mu-item-action {
				width: 40%;
				overflow: hidden;
				max-height: 116px;
				img {
					width: 100%;
					border-radius: 1px;
				}
			}
			.mu-item-content {
				margin-left: 8px;
				position: relative;
				.mu-item-sub-title {
					font-size: 12px;
					line-height: 25px;
				}
			}
		}
	}
</style>